<!--
 * @author: Victor
 * @Date: 2021-01-29 21:39:26
 * @LastEditTime: 2021-02-20 18:26:52
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频列表</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      tr:nth-child(2n) {
        background-color: #f4f4f4;
      }
      th{
        text-align: center;
      }
    </style>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/Pagination.js"></script>
  </head>
  <body style="padding: 15px">
    <h2 class="text-center">黑马导师授课视频审核程序</h2>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">视频列表</h3>
      </div>
      <div class="panel-body">
        <!-- 搜索区开始 -->
        <form class="form-inline" id="filter">
          <div class="form-group">
            <label for="campus">校区</label>
            <select name="campus" class="form-control" id="campus">
              <option value="">请选择</option>
              <option value="武汉">武汉</option>
              <option value="长沙">长沙</option>
              <option value="重庆">重庆</option>
              <option value="成都">成都</option>
            </select>
          </div>
          <div class="form-group">
            <label for="time">时间</label>
            <input type="date" class="form-control" name="date" id="time" />
          </div>
          <div class="form-group">
            <label for="subject">学科</label>
            <select name="subject" class="form-control" id="subject">
              <option value="">请选择</option>
              <option value="java">java</option>
              <option value="前端">前端</option>
              <option value="UI">UI</option>
              <option value="python">python</option>
            </select>
          </div>
          <div class="form-group">
            <label for="toexamine">待审核</label>
            <select name="toexamine" class="form-control" id="toexamine">
              <option value="">请选择</option>
              <option value="1">1级(教学主管)</option>
              <option value="2">2级(校长)</option>
              <option value="3">3级(区总)</option>
              <option value="4">4级(总裁)</option>
            </select>
          </div>
          <div class="form-group">
            <label for="examined">已审核</label>
            <select name="examined" class="form-control" id="examined">
              <option value="">请选择</option>
              <option value="1">1级(教学主管)</option>
              <option value="2">2级(校长)</option>
              <option value="3">3级(区总)</option>
              <option value="4">4级(总裁)</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary">查询</button>
          <input type="reset" value="重置" class="btn btn-default" />
          <input type="button" value="新增" class="btn btn-info add" />
        </form>
        <!-- 搜索区结束 -->
      </div>
    </div>

    <!-- 列表开始 -->
    <table class="table table-bordered table-hover text-center">
      <thead>
        <tr>
          <th>id</th>
          <th>校区</th>
          <th>时间</th>
          <th>学科</th>
          <th>老师</th>
          <th>链接地址</th>
          <th>时长(分钟)</th>
          <th>1级审核(教学主管)</th>
          <th>2级审核(校长)</th>
          <th>3级审核(区总)</th>
          <th>4级审核(总裁)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <!-- 列表结束 -->
    <!-- 分页 -->
    <div class="pagebox"></div>
    <script>
      $(function () {
        // 标记当前页码
        var p = 1;
        var maxP = 1;
        // 渲染所有视频数据
        getList();
        // 按条件过滤
        $('#filter').submit(function (e) {
          e.preventDefault();
          var search = getSearch();
          getList(search);
        });

        // 翻页
        $('.pagebox').on('click', 'a', function () {
          if ($(this).parent().hasClass('active')) {
            // 当前页
            return false;
          } else {
            var page = p;
            var search = getSearch();
            var special = $(this).attr('aria-label');
            // 上一页 下一页 首页 尾页
            if (special) {
              if (special == 'prev') {
                page--;
              } else if (special == 'next') {
                page++;
              } else if (special == 'last') {
                page = maxP;
              } else {
                page = 1;
              }
            } else {
              page = $(this).html();
            }
            search['page'] = page;
            getList(search);
          }
        });

        // input框 回车
        $('.pagebox').on('keyup', 'input', function (e) {
          console.log(e);
          if (e.keyCode == 13 && $(this).val() != p) {
            var search = getSearch();
            var page = $(this).val();
            search['page'] = page;
            getList(search);
          }
        });
        // 跳转新增页
        $('.btn.add').click(function () {
          location.href = 'add.html';
        });

        // 获取过滤参数
        function getSearch() {
          var params = $('#filter').serialize();
          var tmp = params.split('&');
          var search = {};
          tmp.forEach(function (ele, i) {
            var e = ele.split('=');
            if (e[1]) {
              if (e[0] == 'toexamine') {
                e[0] = 'examine_' + e[1];
                e[1] = 0;
              } else if (e[0] == 'examined') {
                e[0] = 'examine_' + e[1];
                e[1] = 1;
              }
              search[e[0]] = e[1];
            }
          });
          return search;
        }
        function getList(search) {
          if (!search) {
            search = {};
          }
          $.get('http://119.45.60.228/info', search, function (res) {
            var data = res.results;
            if (data.length > 0) {
              var html = '';
              for (var o of data) {
                var tr = `<tr>
                            <td>${o.v_id}</td>
                            <td>${o.campus}</td>
                            <td>${o.date}</td>
                            <td>${o.subject}</td>
                            <td>${o.teacher}</td>
                            <td><a href="${
                              o.url
                            }" target="_blank" title="url中#后面的内容为提取码">${
                  o.url
                }</a>&nbsp;&nbsp;提取码:${
                  o.url.lastIndexOf('#') != -1
                    ? o.url.substr(o.url.lastIndexOf('#') + 1)
                    : '无'
                }</td><td>${o.time}</td>
                            <td><a href='check.html?lv_id=1&v_id=${o.v_id}'>${
                  o.examine_1 != 0 ? '已审核,得分:' + o.examine_1 +'  评级:'+o.evaluate_1: '待审核'
                }</a></td>
                            <td><a href='check.html?lv_id=2&v_id=${o.v_id}'>${
                  o.examine_2 != 0 ? '已审核,得分:' + o.examine_2 +'  评级:'+o.evaluate_2: '待审核'
                }</a></td>
                            <td><a href='check.html?lv_id=3&v_id=${o.v_id}'>${
                  o.examine_3 != 0 ? '已审核,得分:' + o.examine_3 +'  评级:'+o.evaluate_3: '待审核'
                }</a></td>
                            <td><a href='check.html?lv_id=4&v_id=${o.v_id}'>${
                  o.examine_4 != 0 ? '已审核,得分:' + o.examine_4 +'  评级:'+o.evaluate_4: '待审核'
                }</a></td>
                          </tr>`;
                html += tr;
              }
              $('tbody').html(html);
              p = res.page;
              maxP = res.page_count;
              // getPage(res.page_count, res.page);
              $('.pagebox').Pagination({
                page: res.page,
                count: res.total_count,
                limit: 10,
                groups: 10,
                // onPageChange: function (page) {
                //   console.log('当前是:' + page);
                // },
              });
            } else {
              $('tbody').html(
                '<tr><td colspan="' +
                  $('th').length +
                  '">' +
                  '未查到任何记录哦!' +
                  '</td></tr>'
              );
              $('.pagebox').html('');
            }
          });
        }
      });
    </script>
  </body>
</html>
